<template>
  <a-modal
    :visible="visible"
    :width="600"
    :footer="null"
    @cancel="handleClose"
  >
    <div class="modal-status">
      <a-icon type="check-circle" theme="filled" v-if="data.message && data.message.indexOf('成功')>= 0"/>
      <a-icon type="close-circle" theme="filled" style="color:red" v-else />
      <h3>{{data.message && data.message.indexOf('成功')>= 0?'数据导入完成':'数据导入失败'}}</h3>
      <span>{{ closeTime }}秒后自动关闭</span>
    </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      visible: false,
      closeTime: 0,
    };
  },
  methods: {
    handleClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #ccc dashed;
  &:last-child {
    border-bottom: 0;
  }
  & > * {
    width: 400px;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.con-content-top {
  margin-bottom: 20px;
  & > * {
    margin-right: 10px;
  }
}
.con-content-list-empty {
  text-align: center;
  & > * {
    margin-bottom: 10px;
  }
  .empty {
    min-height: 260px;
    // background: url(~@/assets/images/empty.png) no-repeat center;
  }
  p {
    color: #000;
  }
}
.modal-status {
  text-align: center;
  padding: 60px 0;
  .anticon {
    font-size: 70px;
    color: #52c41a;
  }
  h3 {
    font-size: 24px;
    font-weight: bold;
    padding: 30px 0 10px;
  }
  p {
    font-size: 18px;
  }
  .blue {
    color: #02a7f0;
  }
  .red {
    color: #d9001b;
  }
}
</style>
